<template>
  <a-modal
    :visible="visible"
    :destroy-on-close="true"
    :mask="false"
    title="图标选择"
    width="800px"
    @cancel="visible = false"
    @ok="handleOk"
  >
    <a-tabs v-model="selectedKey">
      <a-tab-pane key="1" tab="方向性图标">
        <a-tooltip
          v-for="(item, index) in directionIcons"
          :key="index"
          :title="item"
          :get-popup-container="getPopupContainer"
        >
          <component
            :is="item"
            :class="selectedItem === item ? 'icon selected' : 'icon'"
            @click="handleSelectIcon(item)"
          />
        </a-tooltip>
      </a-tab-pane>
      <a-tab-pane key="2" tab="指示性图标">
        <a-tooltip
          v-for="(item, index) in suggestionIcons"
          :key="index"
          :title="item"
          :get-popup-container="getPopupContainer"
        >
          <component
            :is="item"
            :class="selectedItem === item ? 'icon selected' : 'icon'"
            @click="handleSelectIcon(item)"
          />
        </a-tooltip>
      </a-tab-pane>

      <a-tab-pane key="3" tab="编辑类图标">
        <a-tooltip
          v-for="(item, index) in editIcons"
          :key="index"
          :title="item"
          :get-popup-container="getPopupContainer"
        >
          <component
            :is="item"
            :class="selectedItem === item ? 'icon selected' : 'icon'"
            @click="handleSelectIcon(item)"
          />
        </a-tooltip>
      </a-tab-pane>

      <a-tab-pane key="4" tab="数据类图标">
        <a-tooltip
          v-for="(item, index) in dataIcons"
          :key="index"
          :title="item"
          :get-popup-container="getPopupContainer"
        >
          <component
            :is="item"
            :class="selectedItem === item ? 'icon selected' : 'icon'"
            @click="handleSelectIcon(item)"
          />
        </a-tooltip>
      </a-tab-pane>
      <a-tab-pane key="5" tab="网站通用图标">
        <a-tooltip
          v-for="(item, index) in webIcons"
          :key="index"
          :title="item"
          :get-popup-container="getPopupContainer"
        >
          <component
            :is="item"
            :class="selectedItem === item ? 'icon selected' : 'icon'"
            @click="handleSelectIcon(item)"
          />
        </a-tooltip>
      </a-tab-pane>
      <a-tab-pane key="6" tab="品牌和标识">
        <a-tooltip
          v-for="(item, index) in logoIcons"
          :key="index"
          :title="item"
          :get-popup-container="getPopupContainer"
        >
          <component
            :is="item"
            :class="selectedItem === item ? 'icon selected' : 'icon'"
            @click="handleSelectIcon(item)"
          />
        </a-tooltip>
      </a-tab-pane>
    </a-tabs>
  </a-modal>
</template>

<script name="IconModal" lang="ts" setup>
const directionIcons = [
  "StepBackwardOutlined",
  "StepForwardOutlined",
  "FastBackwardOutlined",
  "FastForwardOutlined",
  "ShrinkOutlined",
  "ArrowsAltOutlined",
  "DownOutlined",
  "UpOutlined",
  "LeftOutlined",
  "RightOutlined",
  "CaretUpOutlined",
  "CaretDownOutlined",
  "CaretLeftOutlined",
  "CaretRightOutlined",
  "UpCircleOutlined",
  "DownCircleOutlined",
  "LeftCircleOutlined",
  "RightCircleOutlined",
  "UpCircleOOutlined",
  "DownCircleOOutlined",
  "RightCircleOOutlined",
  "LeftCircleOOutlined",
  "DoubleRightOutlined",
  "DoubleLeftOutlined",
  "VerticalLeftOutlined",
  "VerticalRightOutlined",
  "ForwardOutlined",
  "BackwardOutlined",
  "RollbackOutlined",
  "EnterOutlined",
  "RetweetOutlined",
  "SwapOutlined",
  "SwapLeftOutlined",
  "SwapRightOutlined",
  "ArrowUpOutlined",
  "ArrowDownOutlined",
  "ArrowLeftOutlined",
  "ArrowRightOutlined",
  "PlayCircleOutlined",
  "PlayCircleOOutlined",
  "UpSquareOutlined",
  "DownSquareOutlined",
  "LeftSquareOutlined",
  "RightSquareOutlined",
  "UpSquareOOutlined",
  "DownSquareOOutlined",
  "LeftSquareOOutlined",
  "RightSquareOOutlined",
  "LoginOutlined",
  "LogoutOutlined",
  "MenuFoldOutlined",
  "MenuUnfoldOutlined",
  "BorderBottomOutlined",
  "BorderHorizontalOutlined",
  "BorderInnerOutlined",
  "BorderLeftOutlined",
  "BorderRightOutlined",
  "BorderTopOutlined",
  "BorderVerticleOutlined",
  "PicCenterOutlined",
  "PicLeftOutlined",
  "PicRightOutlined",
  "RadiusBottomleftOutlined",
  "RadiusBottomrightOutlined",
  "RadiusUpleftOutlined",
  "RadiusUprightOutlined",
  "FullscreenOutlined",
  "FullscreenExitOutlined"
];
const suggestionIcons = [
  "QuestionOutlined",
  "QuestionCircleOutlined",
  "PlusOutlined",
  "PlusCircleOutlined",
  "PauseOutlined",
  "PauseCircleOutlined",
  "MinusOutlined",
  "MinusCircleOutlined",
  "PlusSquareOutlined",
  "MinusSquareOutlined",
  "InfoOutlined",
  "InfoCircleOutlined",
  "ExclamationOutlined",
  "ExclamationCircleOutlined",
  "CloseOutlined",
  "CloseCircleOutlined",
  "CloseSquareOutlined",
  "CheckOutlined",
  "CheckCircleOutlined",
  "CheckSquareOutlined",
  "ClockCircleOutlined",
  "WarningOutlined",
  "IssuesCloseOutlined",
  "StopOutlined"
];
const editIcons = [
  "EditOutlined",
  "FormOutlined",
  "CopyOutlined",
  "ScissorOutlined",
  "DeleteOutlined",
  "SnippetsOutlined",
  "DiffOutlined",
  "HighlightOutlined",
  "AlignCenterOutlined",
  "AlignLeftOutlined",
  "AlignRightOutlined",
  "BgColorsOutlined",
  "BoldOutlined",
  "ItalicOutlined",
  "UnderlineOutlined",
  "StrikethroughOutlined",
  "RedoOutlined",
  "UndoOutlined",
  "ZoomInOutlined",
  "ZoomOutOutlined",
  "FontColorsOutlined",
  "FontSizeOutlined",
  "LineHeightOutlined",
  "ColumHeightOutlined",
  "DashOutlined",
  "SmallDashOutlined",
  "SortAscendingOutlined",
  "SortDescendingOutlined",
  "DragOutlined",
  "OrderedListOutlined",
  "RadiusSettingOutlined"
];
const dataIcons = [
  "AreaChartOutlined",
  "PieChartOutlined",
  "BarChartOutlined",
  "DotChartOutlined",
  "LineChartOutlined",
  "RadarChartOutlined",
  "HeatMapOutlined",
  "FallOutlined",
  "RiseOutlined",
  "StockOutlined",
  "BoxPlotOutlined",
  "FundOutlined",
  "SlidersOutlined"
];
const webIcons = [
  "LockOutlined",
  "UnlockOutlined",
  "BarsOutlined",
  "BookOutlined",
  "CalendarOutlined",
  "CloudOutlined",
  "CloudDownloadOutlined",
  "CodeOutlined",
  "CopyOutlined",
  "CreditCardOutlined",
  "DeleteOutlined",
  "DesktopOutlined",
  "DownloadOutlined",
  "EllipsisOutlined",
  "FileOutlined",
  "FileTextOutlined",
  "FileUnknownOutlined",
  "FilePdfOutlined",
  "FileWordOutlined",
  "FileExcelOutlined",
  "FileJpgOutlined",
  "FilePptOutlined",
  "FileMarkdownOutlined",
  "FileAddOutlined",
  "FolderOutlined",
  "FolderOpenOutlined",
  "FolderAddOutlined",
  "HddOutlined",
  "FrownOutlined",
  "MehOutlined",
  "SmileOutlined",
  "InboxOutlined",
  "LaptopOutlined",
  "AppstoreOutlined",
  "LinkOutlined",
  "MailOutlined",
  "MobileOutlined",
  "NotificationOutlined",
  "PaperClipOutlined",
  "PictureOutlined",
  "PoweroffOutlined",
  "ReloadOutlined",
  "SearchOutlined",
  "SettingOutlined",
  "ShareAltOutlined",
  "ShoppingCartOutlined",
  "TabletOutlined",
  "TagOutlined",
  "TagsOutlined",
  "ToTopOutlined",
  "UploadOutlined",
  "UserOutlined",
  "VideoCameraOutlined",
  "HomeOutlined",
  "LoadingOutlined",
  "Loading-3QuartersOutlined",
  "CloudUploadOutlined",
  "StarOutlined",
  "HeartOutlined",
  "EnvironmentOutlined",
  "EyeOutlined",
  "CameraOutlined",
  "SaveOutlined",
  "TeamOutlined",
  "SolutionOutlined",
  "PhoneOutlined",
  "FilterOutlined",
  "ExceptionOutlined",
  "ExportOutlined",
  "CustomerServiceOutlined",
  "QrcodeOutlined",
  "ScanOutlined",
  "LikeOutlined",
  "DislikeOutlined",
  "MessageOutlined",
  "PayCircleOutlined",
  "CalculatorOutlined",
  "PushpinOutlined",
  "BulbOutlined",
  "SelectOutlined",
  "SwitcherOutlined",
  "RocketOutlined",
  "BellOutlined",
  "DisconnectOutlined",
  "DatabaseOutlined",
  "CompassOutlined",
  "BarcodeOutlined",
  "HourglassOutlined",
  "KeyOutlined",
  "FlagOutlined",
  "LayoutOutlined",
  "PrinterOutlined",
  "SoundOutlined",
  "UsbOutlined",
  "SkinOutlined",
  "ToolOutlined",
  "SyncOutlined",
  "WifiOutlined",
  "CarOutlined",
  "ScheduleOutlined",
  "UserAddOutlined",
  "UserDeleteOutlined",
  "UsergroupAddOutlined",
  "UsergroupDeleteOutlined",
  "ManOutlined",
  "WomanOutlined",
  "ShopOutlined",
  "GiftOutlined",
  "IdcardOutlined",
  "MedicineBoxOutlined",
  "RedEnvelopeOutlined",
  "CoffeeOutlined",
  "CopyrightOutlined",
  "TrademarkOutlined",
  "SafetyOutlined",
  "WalletOutlined",
  "BankOutlined",
  "TrophyOutlined",
  "ContactsOutlined",
  "GlobalOutlined",
  "ShakeOutlined",
  "ApiOutlined",
  "ForkOutlined",
  "DashboardOutlined",
  "TableOutlined",
  "ProfileOutlined",
  "AlertOutlined",
  "AuditOutlined",
  "BranchesOutlined",
  "BuildOutlined",
  "BorderOutlined",
  "CrownOutlined",
  "ExperimentOutlined",
  "FireOutlined",
  "MoneyCollectOutlined",
  "PropertySafetyOutlined",
  "ReadOutlined",
  "ReconciliationOutlined",
  "RestOutlined",
  "SecurityScanOutlined",
  "InsuranceOutlined",
  "InterationOutlined",
  "SafetyCertificateOutlined",
  "ProjectOutlined",
  "ThunderboltOutlined",
  "BlockOutlined",
  "ClusterOutlined",
  "DeploymentUnitOutlined",
  "DollarOutlined",
  "EuroOutlined",
  "PoundOutlined",
  "FileDoneOutlined",
  "FileExclamationOutlined",
  "FileProtectOutlined",
  "FileSearchOutlined",
  "FileSyncOutlined",
  "GatewayOutlined",
  "GoldOutlined",
  "RobotOutlined",
  "ShoppingOutlined"
];
const logoIcons = [
  "AndroidOutlined",
  "AppleOutlined",
  "WindowsOutlined",
  "IeOutlined",
  "ChromeOutlined",
  "GithubOutlined",
  "AliwangwangOutlined",
  "DingdingOutlined",
  "WeiboSquareOutlined",
  "WeiboCircleOutlined",
  "TaobaoCircleOutlined",
  "Html5Outlined",
  "WeiboOutlined",
  "TwitterOutlined",
  "WechatOutlined",
  "YoutubeOutlined",
  "AlipayCircleOutlined",
  "TaobaoOutlined",
  "SkypeOutlined",
  "QqOutlined",
  "MediumWorkmarkOutlined",
  "GitlabOutlined",
  "MediumOutlined",
  "LinkedinOutlined",
  "GooglePlusOutlined",
  "DropboxOutlined",
  "FacebookOutlined",
  "CodepenOutlined",
  "AmazonOutlined",
  "GoogleOutlined",
  "CodepenCircleOutlined",
  "AlipayOutlined",
  "AntDesignOutlined",
  "AliyunOutlined",
  "ZhihuOutlined",
  "SlackOutlined",
  "SlackSquareOutlined",
  "BehanceOutlined",
  "BehanceSquareOutlined",
  "DribbbleOutlined",
  "DribbbleSquareOutlined",
  "InstagramOutlined",
  "YuqueOutlined",
  "AlibabaOutlined",
  "YahooOutlined"
];

const emit = defineEmits(["setIcon"]);
const visible = ref(false);
const selectedKey = ref(1);
const selectedItem = ref("");

const show = () => {
  visible.value = true;
};

const getPopupContainer = (trigger: any) => {
  return trigger.parentElement;
};

const handleSelectIcon = (item: any) => {
  selectedItem.value = item;
};

const handleOk = () => {
  visible.value = false;
  emit("setIcon", selectedItem.value);
};

defineExpose({ show });
</script>

<style lang="less" scoped>
.icon {
  width: 40px;
  height: 40px;
  font-size: 20px;
  line-height: 40px;
  text-align: center;

  &:hover {
    cursor: pointer;
    background: @theme-color;
    color: honeydew;
    border-radius: 5px;
  }

  &.selected {
    background: @theme-color;
    color: honeydew;
    border-radius: 5px;
  }
}
</style>
